import React from 'react';
import { View, Text, StyleSheet, Modal, TouchableOpacity } from 'react-native';
import { COLORS } from '../styles/constants';

/**
 * 权限申请引导弹窗
 * 在首次使用时友好地引导用户授予权限
 */
export default function PermissionRequestModal({
  visible,
  type = 'location', // 'location'
  onGrant,
  onDeny,
}) {
  const getContent = () => {
    return {
      icon: '📍',
      title: '开启定位服务',
      description:
        '为了给您推荐附近的景点和提供精准的导航服务，我们需要获取您的位置信息。',
      benefits: [
        '🗺️ 发现附近的热门景点',
        '🧭 精准导航，不走冤枉路',
        '📊 个性化推荐，量身定制',
      ],
    };
  };

  const { icon, title, description, benefits } = getContent();

  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onDeny}
    >
      <View style={styles.overlay}>
        <View style={styles.container}>
          {/* 图标 */}
          <View style={styles.iconContainer}>
            <Text style={styles.icon}>{icon}</Text>
          </View>

          {/* 标题 */}
          <Text style={styles.title}>{title}</Text>

          {/* 描述 */}
          <Text style={styles.description}>{description}</Text>

          {/* 权益点 */}
          <View style={styles.benefitsContainer}>
            {benefits.map((benefit, index) => (
              <View key={index} style={styles.benefitItem}>
                <Text style={styles.benefitText}>{benefit}</Text>
              </View>
            ))}
          </View>

          {/* 按钮组 */}
          <View style={styles.buttonContainer}>
            <TouchableOpacity
              style={[styles.button, styles.denyButton]}
              onPress={onDeny}
              activeOpacity={0.7}
            >
              <Text style={styles.denyButtonText}>暂不开启</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.button, styles.grantButton]}
              onPress={onGrant}
              activeOpacity={0.7}
            >
              <Text style={styles.grantButtonText}>立即开启</Text>
            </TouchableOpacity>
          </View>

          {/* 隐私提示 */}
          <Text style={styles.privacy}>
            我们严格遵守隐私政策，您的信息将被安全保护
          </Text>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(15, 23, 42, 0.6)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  container: {
    width: '100%',
    maxWidth: 400,
    backgroundColor: COLORS.background.card,
    borderRadius: 24,
    padding: 24,
    alignItems: 'center',
    shadowColor: COLORS.shadow,
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.3,
    shadowRadius: 16,
    elevation: 12,
  },
  iconContainer: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: COLORS.primary,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
    shadowColor: COLORS.primary,
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 6,
  },
  icon: {
    fontSize: 40,
  },
  title: {
    fontSize: 22,
    fontWeight: '700',
    color: COLORS.text.primary,
    marginBottom: 12,
    textAlign: 'center',
  },
  description: {
    fontSize: 15,
    color: COLORS.text.tertiary,
    lineHeight: 22,
    textAlign: 'center',
    marginBottom: 20,
  },
  benefitsContainer: {
    width: '100%',
    marginBottom: 24,
  },
  benefitItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  benefitText: {
    fontSize: 14,
    color: COLORS.text.secondary,
    flex: 1,
  },
  buttonContainer: {
    flexDirection: 'row',
    width: '100%',
    gap: 12,
    marginBottom: 16,
  },
  button: {
    flex: 1,
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  denyButton: {
    backgroundColor: COLORS.background.secondary,
  },
  denyButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: COLORS.text.secondary,
  },
  grantButton: {
    backgroundColor: COLORS.primary,
    shadowColor: COLORS.primary,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 4,
  },
  grantButtonText: {
    fontSize: 16,
    fontWeight: '700',
    color: '#fff',
  },
  privacy: {
    fontSize: 12,
    color: COLORS.text.quaternary,
    textAlign: 'center',
    lineHeight: 18,
  },
});
